<template>
  <view class="card-box">
    <view class="card-title flex-between-center pl-25 pl-28 pr-28 h-96" @click="toggleShow">
      <view class="flex-between-center">
        <view class="w-6 h-34 bgc-c5261d mr-14 flex-column-center" style="border-radius: 40rpx"></view>
        <text class="fs-32 fw-500">{{ title }}</text>
      </view>
      <view class="flex-column-center">
        <text class="c-677585 fs-28 mr-17">{{ isShow ? "收起" : "展开" }}</text>
        <u-icon color="#677585" size="32rpx" :name="isShow ? 'arrow-up' : 'arrow-down'"
          :class="['arrow-icon', isShow ? 'arrow-rotate' : '']"></u-icon>
      </view>
    </view>
    <view class="content-wrap" :style="contentStyle" :class="{ 'content-hidden': !isShow }">
      <view class="h-96 flex-column-center fs-32 pl-32 c-677585" style="border-top: 1px solid #f7f8fa"
        v-for="(item, index) in list" :key="index">
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
  props: {
    list: {
      type: Array,
      default: () => { return [] },
    },
    title: {
      type: String,
      default: "",
    },
  },
  computed: {
    contentStyle() {
      const height = this.list.length * 96;
      return {
        height: this.isShow ? `${height}rpx` : '0rpx'
      }
    }
  },
  methods: {
    toggleShow() {
      this.isShow = !this.isShow;
      console.log(this.list);
    },
  },
};
</script>

<style lang="scss" scoped>
.card-box {
  background-color: #fff;
}

.arrow-icon {
  transition: all 0.3s ease;
  transform: rotate(0deg);
}

.arrow-rotate {
  transform: rotate(-180deg);
}

.content-wrap {
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.content-hidden {
  height: 0 !important;
}
</style>